<!--批量引用培养方案-->
<template>
  <div class="wrapper-container" style="width:100%;height:100%;margin: 0">
    <div style="font-weight: bold; color: #004ca7;">
      年度：{{grade}}
    </div>
    <div class="table-container">
      <el-table
        :data="tableData"
        style="width: 100%"
        class="xpaas-table-class"
        row-class-name="xpaas-row-class"
        cell-class-name="xpaas-cell-class"
        header-row-class-name="xpaas-header-row-class"
        header-cell-class-name="xpaas-header-cell-class"
      >
        <el-table-column label="专业【层次】" align="center" prop="specialtyName">
          <template slot-scope="scope">
            {{ scope.row.specialtyName == '' && scope.row.trainingLevelname == '' ?  '' : scope.row.specialtyName }}【{{ scope.row.trainingLevelname }}】
          </template>
        </el-table-column>
        <el-table-column prop="standardEduSystem" label="学制" align="center">
        </el-table-column>
        <el-table-column
          prop="pyfnDetails"
          label="培养方案【版本】"
          align="center"
        >
          <template slot-scope="scope">
            <el-select v-model="scope.row.pyfnDetails" placeholder="请选择" @change="selChangeAll(scope.row)" clearable @clear="getConditionList">
              <el-option
                v-for="(item,index) in pyfaList"
                :key="index"
                :label="item.mc"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="button-group">
      <div @click="getsubmit">
        <div>保 存</div>
      </div>
      <div @click="cancel">
        <div>取 消</div>
      </div>
      <!-- <el-button type="success" @click="getsubmit">保 存</el-button>
      <el-button type="danger" @click="cancel" style="margin-left:60px">取 消</el-button> -->
    </div>
  </div>
</template>

<script>
import InputItem from "../../../components/InputItem.vue";
import ButtonItem from "../../../components/ButtonItem.vue";
import Subscript from "../../../components/Subscript.vue";
import { reqCheckLevelList,reqCheckPlanList,reqUpdatePlan } from "@/api/admin1/check";
import { getConditionList } from "@/api/propositionReview/approval";


export default {
  components: {
    InputItem,
    ButtonItem,
    Subscript,
  },
  data() {
    return {
      current:1,
      size:10,
      grade:localStorage.getItem("grade"),
      cc:'',
      pyfaName:"",
      traininglevel:"",
      pyfafl: "",
      bb:'',
      pageNo: 1,
      pageSize: 10,
      planid: "",
      designcontent: "",
      unitList: [],
      itemType: ["value1"],
      itemTypeList: [
        {
          value: "value1",
          label: "课下作业",
        },
        {
          value: "value2",
          label: "课堂测评",
        },
        {
          value: "value3",
          label: "期中考试",
        },
        {
          value: "value4",
          label: "课终考核",
        },
      ],
      itemTypeObject: {
        value1: "课下作业",
        value2: "课堂测评",
        value3: "期中考试",
        value4: "课终考核",
      },
      traininglevel: "",
      pyfaList: [],
      studytype: "",
      typeList: [],
      coursename: "",
      tableData: [],
      multipleSelection: [],
    };
  },
  mounted() {
    this.reqCheckPlanList();
    this.getConditionList();
  },
  methods: {
    //获取培养方案下拉框
    getConditionList(){
      let that = this;
      return new Promise(() => {
        getConditionList(that.pageNo, that.pageSize, that.bb, that.pyfafl).then((res) => {
          if(res.data.data){
            that.pyfaList = res.data.data
          }
        });
      });
    },
    async reqCheckPlanList() {
      const result = await reqCheckPlanList(this.cc, this.current,this.grade,this.size);
      if (result.data.code == 200) {
        let data = result.data.data;
        data.records.forEach(item=>{
          if(item.trainingProgramInfo) {
            item.yearSpecialtyInfo.pyfnDetails = item.trainingProgramInfo.id;
            // item.pyfaName = item.trainingProgramInfo.mc;
          }
          this.tableData.push(item.yearSpecialtyInfo)
        })
        this.total = data.total;
      }
    },
    selChangeAll(index){
      console.log(index)
    },
    getsubmit(){
      let yearSpecialtyInfoList = [];
      this.tableData.forEach(item=>{
        let obj = {
          "id":item.id,
          "pyfaid":item.pyfnDetails ? item.pyfnDetails : '',
        }
        yearSpecialtyInfoList.push(obj);
      })
      reqUpdatePlan(yearSpecialtyInfoList).then(res=>{
        if(res.data.code == 200){
          this.$message({ type: "success", message: "保存成功！" });
          this.$router.push({
            path: "/admin/training/implementation", //要跳转的页面的路由
          });
          return "ok";
        }
      });
    },
    cancel(){
      this.$router.push({
        path: "/admin/training/implementation",
      });
    }
  },
};
</script>
<style lang="less" scoped>
.search-container {
  justify-content: flex-start !important;
}

.search-button {
  cursor: pointer;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 27px;
  background: #f1f8fe;
  border: 1px solid #51aef6;
  border-radius: 6px;

  > span {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #51aef6;
  }

  > img {
    width: 19px;
    height: 19px;
    margin-right: 4px;
  }
}

.table-container {
  .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }

  .el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }

  .el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }

  .wrapper-button {
    display: flex;
    flex-direction: column;
    align-items: center;

    > div {
      margin-bottom: 8px;
    }
  }
}
</style>

<style lang="less" scoped>
@import "../../../styles/special.less";

.wrapper-container {
  width: 1711px;
  margin: 0 auto;
}

.table-container2 {
  .table-data {
    min-height: 500px;
  }

  display: flex;
  justify-content: space-between;
  align-items: center;
}

.table-container {
  margin-top: 15px;

  .table-data {
    width: 100%;
    border: 0.8px solid #004ca7;
    border-radius: 9px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #004ca7;
  }
}

.save-button {
  width: 87px;
  height: 36px;
  line-height: 36px;
  background: #fff6ef;
  border: 1px solid #f3b815;
  border-radius: 6px;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #f3b815;
  text-align: center;
  margin: 82px auto;
}

.zuoyou {
  width: 200px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.button-group {
  cursor: pointer;
  margin-top: 50px;
  text-align: center;

  > div {
    display: inline-block;
    font-size: 18px;
    padding: 6px 22px;
    border-radius: 6px;

    &:nth-child(1) {
      color: #f3b815;
      border: 1px solid #f3b815;
      background: #fff6ef;
      margin-right: 139px;
    }

    &:nth-child(2) {
      color: #ff3819;
      border: 1px solid #ff3819;
      background: #ffefef;
    }
  }
}
@fontFamily:"Microsoft YaHei";
.xpaas-table-class {
  border: 1px solid #004ca7;
  border-radius: 9px;
  > ::v-deep div.el-table__header-wrapper {
    > table.el-table__header {
      > thead {
        > tr.xpaas-header-row-class {
          padding: 0;
          height: 76px;
          background-color: #edf2f9;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          line-height: 20px;
          color: #004ca7;
          > th.xpaas-header-cell-class {
            font-weight: bold;
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            background-color: #edf2f9;
            > div.cell {
              font-size: 16px;
              font-weight: bold;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
        }
      }
    }
  }
  > ::v-deep div.el-table__body-wrapper {
    > table.el-table__body {
      > tbody {
        > tr.xpaas-row-class {
          > td.xpaas-header-cell-class {
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            background-color: #edf2f9;
            > div.cell {
              font-size: 16px;
              font-weight: bold;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
          > td.xpaas-cell-class {
            height: 76px;
            
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            > div.cell {
              font-weight: normal;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
        }
      }
    }
  }
}
</style>
